// 导入链接
import Link from "next/link";
import {Menu, Input, Button} from "antd"
import {SearchOutlined} from "@ant-design/icons"
import {usePathname} from "next/navigation"

// 导航栏组件
export default function Navbar() {
    // 获取路径名
    const pathName = usePathname();

    // 导航菜单项
    const navItems = [
        {name: "首页", href: "/"},
        {name: "文章", href: "/posts"},
        {name: "分类", href: "/categories"},
        {name: "标签", href: "/tags"},
        {name: "关于", href: "/about"},
    ]
    return (
        <nav className="bg-white shadow-sm">
            <div className="max-w-7xl mx-auto px-4">
                <div className="flex justify-between items-center h-16">
                    {/* 左侧 Logo + 菜单 */}
                    <div className="flex items-center">
                        {/*  logo */}
                        <div className="mr-8">
                            <h1 className="text-2xl font-bold text-gray-900 m-0">企业博客</h1>
                        </div>

                        {/* 菜单 */}
                        <Menu
                            mode="horizontal"
                            selectedKeys={[pathName]}
                            style={{borderBottom: "none", boxShadow: "none"}}
                            items={navItems.map(item => ({
                                key: item.href,
                                label: (
                                    <Link href={item.href}>
                                        {item.name}
                                    </Link>
                                )
                            }))}
                        />
                    </div>
                    {/* 右侧的搜索栏 */}
                    <div className="flex items-center">
                        <Input
                            placeholder="搜索文章..."
                            prefix={<SearchOutlined className={"text-gray-400"}/>}
                            className="w-64"
                            allowClear
                        />
                    </div>
                </div>
            </div>
        </nav>
    );
}